<%--
  Created by IntelliJ IDEA.
  User: JAVA
  Date: 2019/12/9
  Time: 20:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <title>测试主页</title>
    <script src="${ctx}/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            findData('');
            $("#searchBtn").click(function () {
                var f = $('#searchForm');
                var data = f.serialize();
                findData(data);
            });
        });
        function findData(data){
            var params = "";
            if(data!=''){
                params = '?'+data;
            }
            $(".tr").remove();//移除
            $.ajax({
                type:'GET',
                url:'${ctx}/sc/find'+params,
                dataType:'json',
                success:function (r) {
                    $.each(r,function (i,stu) {
                        var str = '<tr class="tr">' +
                                    '<td>'+(i+1)+'</td>' +
                                    '<td>'+stu.name+'</td>' +
                                    '<td>'+stu.sex+'</td>' +
                                    '<td>'+stu.age+'</td>' +
                                    '<td>'+stu.birthday+'</td>' +
                                    '<td>'+stu.address+'</td>' +
                                  '</tr>';
                        $('#trs').append(str);
                    });
                }
            });
        }
    </script>
    <style type="text/css">
        table{
            width: 100%;
            height: auto;
        }
        table td{
            text-align: center;
            border-bottom: 1px solid lightskyblue;
            line-height: 26px;
        }
    </style>
</head>
<body>
    <center>
        <h1>学生信息显示</h1>
    </center>
    <div style="border: 1px solid #383838;margin: 10px;">
        <form style="margin: 5px" id="searchForm">
            名称:<input type="text" name="name">
            <input type="button" value="查询" id="searchBtn">
        </form>
    </div>
    <div style="margin: 10px">
        <table id="trs">
            <tr>
                <th width="10px">&nbsp;</th>
                <th>名称</th>
                <th>性别</th>
                <th>年龄</th>
                <th>出生日期</th>
                <th>家住地址</th>
            </tr>

        </table>
    </div>
</body>
</html>
